<template>
    <div class="tool-bar padding_lr5">
        <router-link class="icon" tag="span" to="/my"><img :src="back" alt=""></router-link>
        <span class="name">{{names}}</span>
        <span class="other-icon" >

        </span>
    </div>
</template>

<script>
    import back from "@/assets/img/icon_back_white.png"
    export default {
        name: "ToolBar2",
        props:['names'],
        data(){
            return {
                back:back,

            }
        },

    }
</script>

<style scoped>
    .tool-bar{
        height:3rem;
        background:#14A365;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #14A365;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }
    .padding_lr5{
        padding: 0 0.5rem;
    }
    .tool-bar span{
        display: inline-flex;
    }
    .tool-bar .icon img{
        width: 0.69rem;
        display: block;
        height: 1.25rem;
    }
    .name{
        font-size:1.13rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:#fff;
    }
    .other-icon img{
        width: 1.25rem;
        height: 1.25rem;
        margin-right: 1rem;
    }




</style>